<template>
  <div class="p-3  d-flex flex-column my-container">

    <el-form :model="searchModel" :inline="true" class="d-flex justify-content-end">
      <el-form-item>
        <el-input v-model="searchModel.userName"  clearable
                  @clear="searchClick" :disabled="detailsDisabled" placeholder="请输入角色姓名"
                  prefix-icon="el-icon-search"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchClick">
          搜索
        </el-button>
      </el-form-item>
    </el-form>


    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="mb-3">
        <el-button type="primary" icon="el-icon-plus" @click="handlerAccount" v-permission="'ROLE_ADD'" v-if="permersion.add">
          添加角色
        </el-button>
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </div>

      <div class="col d-flex over-auto">
        <el-table v-loading="loading" border :data="tableData" height="100%" ref="tableRef">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="roleName" label="角色名称" align="center"/>
          <el-table-column prop="roleDes" label="角色描述" align="center"/>
          <el-table-column prop="createByName" label="创建人" align="center"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="170" >
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column prop="updateByName" label="更新人" align="center"></el-table-column>
          <el-table-column label="更新时间" align="center" prop="createTime" width="170" >
            <template slot-scope="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="620" align="center">
            <template #default="{ row }">
<!--              <div class="d-flex white-nowrap">-->
<!--              :disabled="(row.roleCode == roleCode2) || (row.roleCode.includes('XMBM'))"-->
                <el-button type="primary" size="mini" :disabled="(row.roleCode == roleCode2) || (row.roleCode.includes('XMBM'))" v-permission="'ROLE_MENU'" @click="handlerEdit(row, 'menu')">分配菜单权限
                </el-button>
              <el-button type="primary" size="mini"  :disabled="(row.roleCode == roleCode2) || (row.roleCode.includes('XMBM'))" v-permission="'ROLE_BUTTON'" @click="handlerOperationPermission(row)">分配操作权限
              </el-button>
                <el-button type="primary" size="mini" :disabled="(row.roleCode == roleCode2) || (row.roleCode.includes('XMBM'))" v-permission="'ROLE_DEV'" @click="handlerEdit(row, 'equipment')">分配设备权限
                </el-button>
                <el-button type="primary" size="mini" :disabled="(row.roleCode == roleCode2) || (row.roleCode.includes('XMBM'))" v-permission="'ROLE_APP'" @click="handlerEdit(row, 'app')">分配APP权限
                </el-button>
                <el-button type="warning" size="mini" :disabled="(row.roleCode == roleCode2) || (row.roleCode.includes('XMBM'))" v-permission="'ROLE_EDIT'" @click="handlerEdit(row, 'edit')">编辑
                </el-button>
                <el-button type="danger" size="mini" :disabled="(row.roleCode == roleCode2) || (row.roleCode.includes('XMBM'))" v-permission="'ROLE_DEL'" @click="handlerDelete(row)">删除</el-button>
<!--              </div>-->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <pagination class="pagination" :total="count" :page.sync="pageIndex" :limit.sync="pageSize"
                  @pagination="pagination"/>
    </div>
    <!-- 弹框 -->
    <yc-dialog ref="ycDialog" :centerTitle="centerTitle" :dialogTitle="dialogTitle">
      <template #content>
        <div class="dialog-content">
          <el-form ref="loginFormRef" :model="newAccountModel" :rules="rules" label-width="90px">
            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="newAccountModel.roleName" :disabled="detailsDisabled"/>
            </el-form-item>
            <el-form-item label="角色描述">
              <el-input v-model="newAccountModel.roleDes" :disabled="detailsDisabled"/>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>

    <!-- 操作权限 -->
    <yc-dialog ref="operationPermissionDialog" centerTitle="操作权限" dialogTitle="操作权限">
      <template #content>
        <div v-for="(item, index) in roleButtonList" :key="index" class="mb-3">
          <el-checkbox
            @change="(val) => handleCheckAllListChange(val, item)"
            :indeterminate="itemIndeterminate(item)"
            v-model="item.checkAll"
          >{{ item.menuName }}</el-checkbox>
          <el-checkbox-group
            v-model="checkedData"
            @change="handleCheckedCitiesChange"
            style="padding-left: 30px;">
            <el-checkbox
              class="mt-3"
              v-for="items in item.roleButton"
              :key="items.buttonCode"
              :label="items"
            >{{ items.buttonName }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="projectPermission" @click="saveOperationPermission">保存</el-button>
        <el-button @click="$refs.operationPermissionDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
    
    <!-- 菜单权限 -->
    <yc-dialog ref="menuDialog" :centerTitle="centerTitle" :dialogTitle="dialogTitle">
      <template #content>
        <el-table ref="multipleTable" border :data="tableData2" tooltip-effect="dark" @select="select"
                  @select-all="selectAll" @selection-change="handleSelectionChange" :tree-props="{
						label: 'menuName',
						children: 'children',
						hasChildren: 'hasChildren'
					}" row-key="id" :select-on-indeterminate="true">
          <el-table-column type="selection" align="center" width="120"></el-table-column>
          <el-table-column prop="menuName" label="菜单名称">
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <el-button type="primary" @click="dialogSave(1)">确定</el-button>
        <el-button @click="$refs.menuDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>
    
    <!-- 设备权限 -->
    <yc-dialog ref="equipmentDialog" :centerTitle="centerTitle" :dialogTitle="dialogTitle">
      <template #content>
        <el-form :model="equipmentModel" :inline="true">
          <el-form-item label="设备名称:">
            <el-input v-model="equipmentModel.deviceName" clearable @clear="deviceSearch" placeholder="请输入设备名称"/>
          </el-form-item>
          <el-form-item label="设备编码:">
            <el-input v-model="equipmentModel.deviceCode" clearable @clear="deviceSearch" placeholder="请输入设备编码"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="deviceSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table max-height="200px" border :data="equipmentList" ref="tableRef">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="deviceName" label="设备名称" align="center"/>
          <el-table-column prop="deviceCode" label="设备编码" align="center"/>
          <el-table-column prop="deviceDes" label="设备描述" align="center"/>
          <el-table-column prop="createTime" label="" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                :type="equipmentSelectList.findIndex(item => item.deviceCode == scope.row.deviceCode) == -1 ? 'primary' : 'danger'"
                size="mini" @click="onEquipmentSelect(scope.row)">{{ equipmentSelectList.findIndex(item =>
                item.deviceCode
                ==
                scope.row.deviceCode) == -1 ? "选择" : "删除" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination class="pagination" :total="equipmentPage.total" :page.sync="equipmentPage.pageIndex"
                    :limit.sync="equipmentPage.pageSize" @pagination="equipmentPagination"/>
        <div class="mt-4 mb-2">已选择设备</div>
        <el-table max-height="200px" border :data="equipmentSelectList" ref="tableRef">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="deviceName" label="设备名称" align="center"/>
          <el-table-column prop="deviceCode" label="设备编码" align="center"/>
          <el-table-column prop="deviceDes" label="设备描述" align="center"/>
          <el-table-column prop="createTime" label="分配权限" align="center">
            <template slot-scope="scope">
              <el-select v-model="equipmentSelectList[scope.$index].rOrW" placeholder="请选择">
                <el-option v-for="item in equipmentOptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="" align="center" width="100">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="onEquipmentSelect(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <el-button type="primary" @click="onEquipmentSave">保存</el-button>
        <el-button @click="$refs.equipmentDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>

    <!-- app权限 -->
    <yc-dialog ref="appDialog" :centerTitle="centerTitle" :dialogTitle="dialogTitle">
      <template #content>
        <el-table ref="appMultipleTable" border :data="appList">
          <el-table-column type="selection" align="center" width="120"></el-table-column>
          <el-table-column prop="appFunName" label="APP权限">
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <el-button type="primary" @click="onAppSave">确定</el-button>
        <el-button @click="$refs.appDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>
    
    <!-- 封装操作后弹框 -->
    <global-message v-if="isGlobalMessageShow" @receive="receive" :message="message"/>
  </div>
</template>

<script>
  import store from "@/store"
  import {
    accountConfig
  } from "@/config/account"
  import {
    queryRolePage,
    queryOneRole,
    updateRole,
    updateRoleInfo,
    insertRole,
    deleteRole,

    insertOrUpdateBRoleToApp,
    queryListBRoleToApp,
    queryPageDevice,
    queryListBRoleToDevice,
    insertBRoleToDevice,

    queryRoleBindMen,
    insertRoleBindMenButton
  } from "@/api/userControl/role.js"
  import ycDialog from "@/components/pageDialog"

  export default {
    data() {
      return {
        roleCode2: "",
        roleCode3: "",
        appList: [], //app权限
        equipmentList: [], //设备权限列表
        equipmentSelectList: [], //设备权限列表
        equipmentPage: {
          total: 0,
          pageIndex: 1,
          pageSize: 10
        },
        equipmentOptions: [{
          value: "read",
          label: "只读"
        }, {
          value: "write-need-sms",
          label: "可操作-需要短信通知"
        }, {
          value: "write-no-sms",
          label: "可操作-无需短信通知"
        }],

        //设备权限搜索框
        equipmentModel: {
          deviceName: "",
          deviceCode: ""
        },
        isGlobalMessageShow: false,
        isGlobalMessageBoxShow: false,
        messageTitleDes: "",
        message: "",
        messageBoxSaveShow: false,
        accountConfig,
        tableData: [],
        count: 0,
        pageIndex: 1,
        pageSize: 20,
        count2: 10,
        pageIndex2: 1,
        pageSize2: 20,
        drawerTitle: "账户详情",
        detailsDisabled: false, //详情 如果为true代表禁用状态
        selectOptions: [{
          label: "正常/停用状态（全部）",
          value: null
        },
          {
            label: "正常",
            value: 1
          },
          {
            label: "禁用",
            value: 0
          }
        ],
        searchModel: {
          userName: "",
          status: "" //正常/停用状态（全部）
        },

        newAccountModel: {
          roleName: "",
          roleDes: "",
          roleCode: ""
        },
        centerTitle: "",
        dialogTitle: "",
        permersion: {
          add: true,
          del: true,
          update: true,
          search: true
        },
        loading: false,
        tableData2: [],
        multipleSelection: [],
        editorId: "",
        rules: {
          roleName: [{
            required: true,
            message: "请输入角色名称",
            trigger: "blur"
          }]
        },
        roleButtonList: [],
        checkedData: [],
        projectPermission: false,
        roleCode: "" //点击用户弹窗
      }
    },
    components: {
      ycDialog
    },
    created() {
      this.getAccountData()
    },
    mounted() {
      this.roleCode2 = sessionStorage.getItem("roleCode")
    },
    methods: {
      //app权限弹窗保存
      onAppSave() {
        let arr = this.$refs.appMultipleTable.selection.map(item => {
          return {
            appFunCode: item.appFucCode,
            roleCode: this.roleCode
          }
        })

        insertOrUpdateBRoleToApp({
          roleCode: this.roleCode,
          MapString1: JSON.stringify(arr)
        }).then(res => {
          if (res.status == 200) {
            this.$message.success(res.message)
            this.$refs.appDialog.dialogVisible = false
          }

        })
      },
      //设备权限弹窗保存
      onEquipmentSave() {
        let arr = this.equipmentSelectList.map(item => {
          return {
            deviceCode: item.deviceCode,
            deviceName: item.deviceName,
            deviceDes: item.deviceDes,
            rOrW: item.rOrW
          }
        })
        insertBRoleToDevice({
          roleCode: this.roleCode,
          MapString1: JSON.stringify(arr)
        }).then(res => {
          if (res.status == 200) {
            this.$message.success(res.message)
            this.$refs.equipmentDialog.dialogVisible = false
          }
        })
      },

      //选择设备
      onEquipmentSelect(row) {
        console.log(row)
        let index = this.equipmentSelectList.findIndex(item => item.id == row.id)
        if (index == -1) {
          // row.rOrW = 'read'
          this.equipmentSelectList.push(row)
        } else {
          this.equipmentSelectList.splice(index, 1)
        }
      },


      insertOrUpdateBRoleToApp() {
        let str = {
          appFunCode: "MU003",
          roleCode: "RO001"
        }
        insertOrUpdateBRoleToApp({
          roleCode: "RO001",
          MapString1: JSON.stringify(str)
        }).then(res => {
          console.log(res)
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      /**
       * 获取表格方法
       */
      async getAccountData(pageIndex = 1, pageSize = 20, tableInfo) {
        this.loading = true
        if (tableInfo) {
          const {
            userName,
            status
          } = tableInfo
          const {
            object
          } = await queryRolePage({
            pageIndex,
            pageSize,
            roleName: userName
          })
          this.tableData = object.data
          this.count = object.count
          this.loading = false
        } else {
          const {
            object
          } = await queryRolePage({
            pageIndex,
            pageSize
          })
          this.tableData = object.data
          this.count = object.count
          this.loading = false
        }
      },
      equipmentPagination(pageItem) {
        this.equipmentPage.pageIndex = pageItem.page
        this.equipmentPage.pageSize = pageItem.limit
        this.queryConfigurableDevice()
      },
      pagination(pageItem) {
        this.getAccountData(pageItem.page, pageItem.limit)
      },
      pagination2(pageItem) {
        this.queryOneRole(pageItem.page, pageItem.limit)
      },
      /**
       * 修改按钮
       */
      async handlerEdit(row, type) {
        this.editorId = row.id
        this.roleCode = row.roleCode
        switch (type) {
          case "edit":
            this.centerTitle = "编辑"
            this.dialogTitle = "编辑"
            this.$refs.ycDialog.dialogVisible = true
            this.detailsDisabled = false
            this.$refs.loginFormRef?.clearValidate()
            this.newAccountModel.roleName = row.roleName
            this.newAccountModel.roleCode = row.roleCode
            this.newAccountModel.roleDes = row.roleDes
            break
          case "menu":
            this.centerTitle = "菜单权限"
            this.dialogTitle = "分配菜单权限"
            if (this.$refs.multipleTable) {
              this.$refs.multipleTable.clearSelection()
            }
            await this.queryOneRole(row)
            this.newAccountModel.roleName = row.roleName
            this.newAccountModel.roleCode = row.roleCode
            this.newAccountModel.roleDes = row.roleDes
            this.$refs.menuDialog.dialogVisible = true
            break
          case "equipment":
            this.centerTitle = "设备权限"
            this.dialogTitle = "分配设备权限"
            this.queryConfigurableDevice()
            this.queryListBRoleToDevice(row.roleCode)
            this.$refs.equipmentDialog.dialogVisible = true
            break
          case "app":
            this.centerTitle = "APP权限"
            this.dialogTitle = "分配APP权限"
            this.queryListBRoleToApp(row.roleCode)
            this.$refs.appDialog.dialogVisible = true
            break
        }

      },
      queryListBRoleToDevice(roleCode) {
        queryListBRoleToDevice({
          roleCode: roleCode
        }).then(res => {
          this.equipmentSelectList = res.object
        })
      },
      //查询设备列表
      queryConfigurableDevice() {
        const { deviceName, deviceCode } = this.equipmentModel
        queryPageDevice({
          pageIndex: this.equipmentPage.pageIndex,
          pageSize: this.equipmentPage.pageSize,
          deviceType: 0,
          deviceName,
          deviceCode
        }).then(res => {
          res.object.data.map(item => {
            item.rOrW = "read"
            return item
          })
          this.equipmentList = res.object.data
          this.equipmentPage.total = res.object.count
        })
      },
      deviceSearch() {
        this.queryConfigurableDevice()
      },
      //查询角色App权限
      queryListBRoleToApp(roleCode) {
        queryListBRoleToApp({
          roleCode: roleCode
        }).then(res => {
          this.appList = res.object
          //设置默认选中
          let rows = this.appList.filter(item => item.messages == "show")
          this.$nextTick(() => {
            if (rows) {
              rows.forEach(row => {
                this.$refs.appMultipleTable.toggleRowSelection(row, true)
              })
            } else {
              this.$refs.appMultipleTable.clearSelection()
            }
          })
        })
      },
      async queryOneRole(val) {
        const params = {
          pageIndex: this.pageIndex2,
          pageSize: this.pageSize2,
          roleCode: val?.roleCode
        }
        const data = await queryOneRole(params)
        this.tableData2 = data.object.menu
        this.checkShow(data.object.menu, true)
      },
      checkShow(data, isShow) {
        data.forEach((e) => {
          if (e.messages == "1") {
            setTimeout(() => {
              this.$refs.multipleTable.toggleRowSelection(e, isShow)
              if (e.children.length) {
                e.children.forEach((v) => {
                  if (v.messages == "1") {
                    this.$refs.multipleTable.toggleRowSelection(v, isShow)
                  }
                })
              }
            })
          }
        })
      },
      /**
       * 删除按钮
       */
      async handlerDelete({ id }) {
        this.$confirm("确定删除此角色吗", "删除操作", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          center: true
        }).then(async () => {
          const { status, message } = await deleteRole({ id })
          if (status == "200") {
            this.getAccountData()
            this.isGlobalMessageShow = true
            this.message = "success"
          }
        })
      },

      // 搜索按钮
      async searchClick() {
        this.getAccountData(1, 20, this.searchModel)
      },
      /**
       * 新建账户
       * */
      async handlerAccount() {
        this.centerTitle = "添加"
        this.dialogTitle = "添加"
        // if(this.$refs.multipleTable) {
        //   this.$refs.multipleTable.clearSelection()
        // }
        // this.queryOneRole()
        this.editorId = ""
        this.detailsDisabled = false
        this.$refs.ycDialog.dialogVisible = true
        this.$refs.loginFormRef.clearValidate()
        Object.keys(this.newAccountModel).forEach((item) => {
          this.newAccountModel[item] = ""
        })
        this.checkShow(this.tableData2, false)
        // this.$refs.multipleTable.clearSelection()
      },
      async dialogSave(type) {
        //type:1  菜单权限分配
        if (type === 1) {
          const arr = []
          this.$refs.multipleTable.selection.forEach((e) => {
            arr.push(e.id + "-" + "menu")
          })
          const str = arr.join(",")
          const {
            roleCode,
            roleName,
            roleDes
          } = this.newAccountModel
          const {
            message,
            status
          } = await updateRole({
            roleCode,
            roleName,
            roleDes,
            menusString: str,
            id: this.editorId
          })
          
          if (status == "200") {
            this.$refs.menuDialog.dialogVisible = false
            this.getAccountData()
            this.$message.success(message)
          }
        } else {
          this.$refs.loginFormRef.validate(async (v) => {
            if (v) {
              const arr = []
              this.multipleSelection.forEach((e) => {
                arr.push(e.id + "-" + "menu")
              })
              const str = arr.join(",")
              if (this.detailsDisabled) {
                // 详情的确定
                this.$refs.ycDialog.dialogVisible = false
              } else if (this.editorId) {

                const {
                  roleCode,
                  roleName,
                  roleDes
                } = this.newAccountModel
                const {
                  message,
                  status
                } = await updateRoleInfo({
                  roleCode,
                  roleName,
                  roleDes,
                  menusString: str,
                  id: this.editorId
                })
                if (status == 200) {
                  this.$message.success(message)
                  this.$refs.ycDialog.dialogVisible = false
                  this.getAccountData()
                }
              } else {
                const {
                  message,
                  status
                } = await insertRole({
                  ...this.newAccountModel,
                  menusString: str
                })
                if (status == 200) {
                  this.$message.success(message)
                  this.$refs.ycDialog.dialogVisible = false
                  this.getAccountData()
                }
              }
            }
          })
        }

      },

      // 分配操作权限
      async handlerOperationPermission({ roleCode }) {
        this.roleButtonList = []
        this.checkedData = []
        this.roleCode3 = roleCode
        await queryRoleBindMen({ roleCode }).then(res => {
          this.roleButtonList = res.object
          // 添加checkAll是否全选
          this.roleButtonList = this.roleButtonList.map((v) => ({
            ...v,
            checkAll: false
          }));
          this.roleButtonList.forEach((item) => {
            let newChild = item.roleButton.filter((v) => {
              return v.isCheck;
            });
            if (newChild.length == item.roleButton.length) {
              item.checkAll = true;
            } else {
              item.checkAll = false;
            }
          });
          res.object.forEach((item) => {
            item.roleButton.forEach((v) => {
              if (v.isCheck) {
                this.checkedData.push(v);
              }
            });
          });
        })
        this.$refs.operationPermissionDialog.dialogVisible = true
      },
      // 全选
      handleCheckAllListChange(val, item) {
        // 过滤掉没有选中的数据，item.child中不包含v时返回-1
        const filterArr = this.checkedData.filter((v) =>
          item.roleButton.indexOf(v) == -1
        );
        this.checkedData = val ? filterArr.concat(item.roleButton) : filterArr;
      },
      // 是否全选
      itemIndeterminate(item) {
        return (
          item.roleButton.some((v) => this.checkedData.indexOf(v) > -1) &&
          !item.roleButton.every((v) => this.checkedData.indexOf(v) > -1)
        );
      },
      handleCheckedCitiesChange(val) {
        this.roleButtonList.forEach((item) => {
          item.checkAll = true;
          item.roleButton.forEach((v) => {
            if (!this.checkedData.includes(v)) {
              item.checkAll = false;
            }
          });
        });
      },
      async saveOperationPermission() {
        this.projectPermission = true
        let arr = this.checkedData.map(item => {
          return item.buttonCode
        })
        await insertRoleBindMenButton({
          roleCode: this.roleCode3,
          buttonString: arr.toString()
        }).then(res => {
          if (res.status == "200") {
            this.$message.success(res.message)
            this.$refs.operationPermissionDialog.dialogVisible = false
          }
          this.projectPermission = false
        })
      },
      
      /**
       * 刷新
       */
      refresh() {
        this.searchModel = {}
        this.getAccountData()
      },
      /**
       * globalMessage的知道按钮的方法
       * */
      receive() {
        this.isGlobalMessageShow = false
      },
      async messageBoxSave(show) {
        this.messageBoxSaveShow = show
      },
      setChildren(children, type) {
        // 编辑多个子层级
        children.map((j) => {
          this.toggleSelection(j, type)
          if (j.children.length) {
            this.setChildren(j.children, type)
          }
        })
      },
      // 选中父节点时，子节点一起选中取消
      select(selection, row) {
        if (row.children.length) {
          const hasSelect = selection.some((el) => {
            return row.id === el.id
          })

          if (hasSelect) {
            if (row.children.length > 0) {
              // 解决子组件没有被勾选到
              this.setChildren(row.children, true)
            }
          } else {
            if (row.children.length > 0) {
              this.setChildren(row.children, false)
            }
          }
        }


        this.tableData2.forEach((item) => {
          if (item.id === row.fatherId) {
            this.$nextTick(() => {
              this.$refs.multipleTable &&
              this.$refs.multipleTable.toggleRowSelection(item, true)
            })
          }
        })
      },
      toggleSelection(row, select) {
        if (row) {
          this.$nextTick(() => {
            this.$refs.multipleTable &&
            this.$refs.multipleTable.toggleRowSelection(row, select)
          })
        }
      },
      // 选择全部
      selectAll(selection) {
        // console.log(selection, "1111")
        // tabledata第一层只要有在selection里面就是全选
        const isSelect = selection.some((el) => {
          const tableDataIds = this.tableData2.map((j) => j.id)
          return tableDataIds.includes(el.id)
        })
        // tableDate第一层只要有不在selection里面就是全不选
        const isCancel = !this.tableData2.every((el) => {
          const selectIds = selection.map((j) => j.id)
          return selectIds.includes(el.id)
        })
        if (isSelect) {
          selection.map((el) => {
            if (el.children) {
              // 解决子组件没有被勾选到
              this.setChildren(el.children, true)
            }
          })
        }
        if (isCancel) {
          this.tableData2.map((el) => {
            if (el.children) {
              // 解决子组件没有被勾选到
              this.setChildren(el.children, false)
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .status {
    display: inline-block;
    padding: 0 10px;
  }

  .title-container {
    display: flex;
    // justify-content: flex-end;
    // height: 60px;

    .search-content {
      // margin: 10px 20px;
      display: flex;
    }

    .addAccount {
      margin: 10px 20px;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .content {
    height: 600px;

    .drawer-title {
      font-weight: 400;
      font-size: 24px;
      color: #000000;
      text-align: center;
      padding: 36px 0;
    }

    .form {
      padding: 0 10px;
    }
  }

  .footer {
    height: 360px;
    display: flex;
    align-items: flex-end;
    // justify-content: st-end;
    padding: 5px 20px;
  }
</style>